import React, { Component } from 'react'



import {Toast,} from 'antd-mobile'




import {List,AutoSizer} from 'react-virtualized'
import axios from 'axios'



 //4、导入utils中获取当前定位城市的方法


 import {  getCurrentCity } from '../../utils'

import NavHeader from '../../components/NavHeader'

import  './index.scss'
// 2、处理城市数据--数据加工

const  formatCityData = list =>{
     
   // 1）数据按城市分类
     const  cityList ={}
      
    //遍历list数组

    list.forEach((item)=>{
           
      //获取每一个城市的首字母
      
      const  first = item.short.substr(0,1)
          
      //判断cityList 中是否有该分类
     
      if(cityList[first]){

        cityList[first].push(item)
      }else{

         cityList[first] = [item]

      }
      
    })

     //2） 获取到这样的数据 cityIndex = [a ,b ,c ]  --数据索引
  const  cityIndex =  Object.keys(cityList).sort()

  return  {
    cityList,
    cityIndex
  }
}


// 5-1、封装处理字母索引的方法

const  formatCityIndex = letter =>{

   switch(letter){
      case  '#': 
         return  '当前定位'
      case  'hot': 
         return  '热门城市'


      default :
         return   letter.toUpperCase()
   }


}


// 索引 A,B等的高度
const  TITLE_HEIGHT = 36

//  每个城市名称的高度

const  NAME_HEIGHT = 50



//  7、 有房源的城市

const  HOUSE_CITY = ['北京','上海',"广州","深圳"]

 class CityList extends Component {

 constructor(props){
          super(props)


  this.state={
    cityIndex:[],
    cityList:{},
    activeIndex:0
  }

// 创建ref对象

this.cityListComponent = React.createRef()


 }

 async componentDidMount() {
  await this.getCityList()

  //    调用List组件的 measureAllRows方法，提前计算 List 中每一行的高度，实现 scrollToRow 的精确跳转
  this.cityListComponent.current.measureAllRows()
}


    //1、定义获取城市列表数据的方法

    async  getCityList(){

        const  res  =  await  axios.get(
          'http://localhost:8080/area/city',
       
          {
            params:{
              level:1
             }
          }
          )

        const  {cityList,cityIndex} =  formatCityData(res.data.body)



        // 3、获取热门城市数据

          const  hotRes = await  axios.get('http://localhost:8080/area/hot')
        
          // 向cityList 中添加 热门城市数据----因为对象中的数据是无序的，因此，直接将其添加到cityList中即可
          cityList['hot'] = hotRes.data.body

        //  将索引添加到 cityIndex 中,因为数组中的数据是有序的，根据需求，只能将其添加到第一项
       
        cityIndex.unshift('hot')


           
           // 4-1、获取当前定位城市

           const curCity = await  getCurrentCity()

           cityList['#'] = [curCity]
           cityIndex.unshift('#')

        console.log(cityList, cityIndex,curCity)
        this.setState({
           cityIndex:cityIndex,
           cityList:cityList
        })
    }

    //  5、处理城市列表方法
     rowRenderer = ({
      key, // Unique key within array of rows
      index, //索引号
      isScrolling, // 当前项是否在滚动中
      isVisible, // 当前项是否在List中是可见的
      style, // 指定每一行的位置
    }) =>{

            //获取每一行的字母索引
            const  { cityIndex ,cityList}  = this.state
            const  letter    = cityIndex[index]

            //获取指定字母索引下的城市列表数据
          //  console.log(cityList[letter])
      
          return (
            <div key={key}  style={style}  className='city'>
                    <div  className='title'>{formatCityIndex(letter)}</div>
                    {
                       cityList[letter].map(item=>(

                           <div    className='name'   onClick={()=>{

                                  this.changeCity(item)

                           }} key={item.value}>
                                {item.label}
                           </div>

                        

                          ))
                                 
                      }
            </div>
          )
    }

   // 5-2、创建动态计算每一行高度的方法
   //  查阅文档，此方法会入参，每一行的下标
    getRowHeight=({  index})=>{

          
      //console.log(index)

      //索引标题高度 + 城市数量 * 每一个城市名称的高度
        

      const  {  cityList,cityIndex}   = this.state
      return    TITLE_HEIGHT  +  cityList [cityIndex[index]].length * NAME_HEIGHT

    }


    // 6、右侧索引渲染方法
     renderCityIndex (){
              
             const  {cityIndex,activeIndex} = this.state
             return  cityIndex.map((it,index)=>(
                  // 处理高亮问题，可以考虑， 样式的动态渲染（三元运算符） 结合 初始化一个下标的索引值来实现
                <li  className='city-index-item'  key={it}  onClick={()=>{
                
                    // scrollToRow方法，必须确保每一行都被加载到页面，是可见的，不然会出现 --每一行不会出现在顶部
                  this.cityListComponent.current.scrollToRow(index)
                } }>
                  <span  className={activeIndex === index  ? 'index-active' :''}  >{ it === 'hot' ? '热' :it.toUpperCase()}</span>
               </li>
             ))      
     }
       // 6-1、处理右侧索引与城市列表对齐方式的方法
       //此方法onRowsRendere会自动入参 每一行的下标
      onRowsRendered  = (  {startIndex})=>{

                if(this.state.activeIndex !== startIndex)   {
                      
                  this.setState({
                    activeIndex:startIndex
                  })


                }
     }
        

     //7、点击城市列表，切换城市房源，并返回到首页
     changeCity({label,value}){

             if( HOUSE_CITY.indexOf(label) > -1 ){

               // 有房源

               localStorage.setItem('hkzf_city',JSON.stringify({label,value}))
                 this.props.history.go(-1)
             }else{
                   // 最后一个参数：是否显示透明蒙层，防止触摸穿透
              Toast.info('该城市暂时没有房源信息',1,null,false)


             }

     }
  render() {
    return (
         <div  className='cityList'>
                <NavHeader>城市列表</NavHeader>

              {/* 城市列表 */}
              {/* 这里引入了 AutoSizer组件之后，就自动的让List组件占满了屏幕  */}
              <AutoSizer>
                {({height, width}) => (
                  <List
                    height={height}
                    width={width}
                    rowCount={this.state.cityIndex.length}
                    rowHeight={this.getRowHeight}
                    rowRenderer={this.rowRenderer}
                    onRowsRendered={
                      this.onRowsRendered
                    } 

                    ref={this.cityListComponent}
                    /* 添加此配置项作用：点击右侧索引，确保城市索引出现在页面顶部 */
                    scrollToAlignment='start'
                  />
                )}
              </AutoSizer>

              {/* 右侧城市列表索引 */}
               <ul  className='city-index'>
                   {this.renderCityIndex()}
               </ul>


         </div>
    )
  }
}
export default  CityList